<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<table border="1">
    <caption>员工信息列表</caption>
    <tr><td>ID</td><td>姓名</td><td>岗位</td><td>工资</td></tr>
    <!--v-for:将数组中的元素循环绑定在页面上，数组有几个元素就循环几次-->
    <tr v-for="emp in emps">
        <td>{{emp.id}}</td>
        <td>{{emp.name}}</td>
        <td>{{emp.job}}</td>
        <td>{{emp.sal}}</td>
    </tr>
</table>
<!--引入vue-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.js"></script>
<script>
    let v = new Vue({
        el:"table",
        data:{
            emps:[{id:1,name:"申公公",job:"老师",sal:20000},
                  {id:2,name:"太乙真人",job:"老师",sal:20000},
                  {id:3,name:"李靖",job:"太守",sal:30000}]
        }
    })
</script>

</body>
</html>